<template>
  <n-config-provider>
    <n-message-provider>
      <n-dialog-provider>
        <n-notification-provider>
          <n-loading-bar-provider>
            <div class="app-container">
              <header class="header">
                <div class="header-content">
                  <div class="flex items-center space-x-3">
                    <div class="w-8 h-8 bg-blue-600 rounded-lg flex items-center justify-center">
                      <span class="text-white font-bold text-sm">干</span>
                    </div>
                    <h1 class="text-xl font-bold text-gray-800">干部授课管理系统</h1>
                  </div>
                  <div class="flex items-center space-x-4">
                    <span class="text-sm text-gray-600">欢迎使用</span>
                  </div>
                </div>
              </header>

              <div class="main-layout">
                <aside class="sidebar">
                  <n-menu
                    :options="menuOptions"
                    :value="$route.name"
                    @update:value="handleMenuSelect"
                    class="h-full"
                  />
                </aside>

                <main class="main-content">
                  <div class="content-wrapper">
                    <router-view />
                  </div>
                </main>
              </div>
            </div>
          </n-loading-bar-provider>
        </n-notification-provider>
      </n-dialog-provider>
    </n-message-provider>
  </n-config-provider>
</template>

<script setup>
import { h } from 'vue'
import { useRouter } from 'vue-router'
import {
  NConfigProvider,
  NMenu,
  NIcon,
  // ---- 新增引入以下 Provider 组件 ----
  NMessageProvider,
  NDialogProvider,
  NNotificationProvider,
  NLoadingBarProvider
} from 'naive-ui'
import {
  HomeOutline,
  PeopleOutline,
  BusinessOutline,
  SchoolOutline,
  CalendarOutline
} from '@vicons/ionicons5'

const router = useRouter()

const menuOptions = [
  {
    label: '数据总览',
    key: 'Dashboard',
    icon: renderIcon(HomeOutline)
  },
  {
    label: '干部管理',
    key: 'Cadres',
    icon: renderIcon(PeopleOutline)
  },
  {
    label: '单位管理',
    key: 'Units',
    icon: renderIcon(BusinessOutline)
  },
  {
    label: '高校管理',
    key: 'Universities',
    icon: renderIcon(SchoolOutline)
  },
  {
    label: '授课计划',
    key: 'Plans',
    icon: renderIcon(CalendarOutline)
  }
]

function renderIcon(icon) {
  return () => h(NIcon, null, { default: () => h(icon) })
}

const handleMenuSelect = (key) => {
  router.push({ name: key })
}
</script>

<style>
/* 你的样式可以保持不变 */
.app-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.header {
  height: 60px;
  border-bottom: 1px solid #e5e7eb;
  flex-shrink: 0;
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
  padding: 0 24px;
}

.main-layout {
  display: flex;
  flex-grow: 1;
  overflow: hidden;
}

.sidebar {
  width: 240px;
  border-right: 1px solid #e5e7eb;
  flex-shrink: 0;
}

.main-content {
  flex-grow: 1;
  overflow-y: auto;
  padding: 24px;
}


</style>